<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Checkout</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png"/>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/chosen.min.css">
    <link rel="stylesheet" href="css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="css/magnific-popup.min.css">
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="css/mobile-menu.css">
    <link rel="stylesheet" href="fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="inblog-page">

<!-- 引入头部导航栏 -->
	<jsp:include page="top.jsp"></jsp:include>

<div class="main-content main-content-checkout">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-trail breadcrumbs">
                    <ul class="trail-items breadcrumb">
                        <li class="trail-item trail-begin">
                            <a href="index.jsp">主页</a>
                        </li>
                        <li class="trail-item trail-end active">
                           	  <a href="index.jsp">付款</a> 
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <h3 class="custom_blog_title">
          	  付款
        </h3>
        <div class="checkout-wrapp">
            <div class="shipping-address-form-wrapp">
                <div class="shipping-address-form  checkout-form">
                    <div class="row-col-1 row-col" id="getAddress">
                       
                       
                    </div>
                    <div class="row-col-2 row-col">
                        <a onclick="address()" class="button btn-pay-now">添加收货地址</a>
                    </div>
                </div>
            </div>
            <div class="payment-method-wrapp">
                <div class="payment-method-form checkout-form">
                            <h3 class="title-form">
                               	确认订单
                            </h3>
                            
                             <table  >
                            
                           		  <thead>
                                    <tr>
                                        <th class="product-remove">图片</th>
                                        <th class="product-thumbnail">规格</th>
                                        <th class="product-name">名字</th>
                                        <th class="product-price">单价</th>
                                        <th class="product-quantity">数量</th>
                                        <th class="product-subtotal">小计</th>
                                    </tr>
                                  </thead>
                                  <tbody id="orderDetail">
									
								</tbody>
                               </table>
                            
                            
                          
                             
                </div>
                <div class="button-control">
                    <a href="shoppingcart.jsp" class="button btn-back-to-shipping">返回购物车</a>
                    <a onclick="addOrder()" class="button btn-pay-now">立刻付款</a>
                </div>
            </div>
            <div class="end-checkout-wrapp">
               
            </div>
        </div>
    </div>
</div>
<!-- 引入页脚栏 -->
	<jsp:include page="footer.jsp"></jsp:include>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.plugin-countdown.min.js"></script>
<script src="js/jquery-countdown.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/mobile-menu.js"></script>
<script src="js/chosen.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/jquery.elevateZoom.min.js"></script>
<script src="js/jquery.actual.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/owl.thumbs.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script src="js/frontend-plugin.js"></script>

</body>
<script type="text/javascript">

	//获取地址
	$.post("http://localhost:8080/Greenleaf/Address/get",
			function(res) {
			  if (res!=null) {
				  document.getElementById("getAddress").innerHTML="";
				 var html = '';
				 $.each(res.data,function(index, item) {
					 var defaule=item.defaule;
					 defaule=defaule == "是" ? "checked" : " ";
					html+=' <p class="form-row form-row-first"><label class="text">	收货人：</label> <label class="text">'+item.consignee+' </label> </p> <p class="form-row form-row-last"> <label class="text">	地址：</label> <label class="text">'+item.provice+''+item.city+''+item.county+''+item.address+'</label> </p> <input type="radio" name="default" '+defaule+'>是否默认<input type="radio" '+defaule+' value="'+item.adsId+'" name="checkd">是否使用<br> <a onclick="delAddress('+item.adsId+')" class="button btn-credit-card" >删除</a> <hr>';
				
				 });
				 document.getElementById("getAddress").innerHTML=html;
			} else {
				$("#sort").append(new Option("暂无数据", ""));
			}
			 
		}, "json");

	$.post("http://localhost:8080/Greenleaf/pdtDetail/gets",
			{"ids" : '${param.ids}'},
			function(res) {
			  if (res!=null) {
				  document.getElementById("orderDetail").innerHTML="";
				 var html = "";
				 var sum=0;
				$.each(res.data,function(index, item) {
					html+='<tr><td class="product-thumbnail"><img style="width: 130px;height: 130px;" src="'+item.pdtImg+'" alt="img" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image"></td>'
					+'<td class="product-remove"><span id="size">'+item.size+'</span></td>'
					+'<td class="product-name"><span id="pdtName">'+item.pdtName+'<span></span></span></td>'
					+'<td class="product-price">￥<span id="unit">'+item.unit+'</span></td>'
					+'<td class="product-quantity"><span id="number">'+item.number+'</span></td>'
					+'<td class="product-subtotal"><span id="total">'+item.total+'</span></td></tr>';
					sum+=item.total;
				});
				html+='<tr><td class="product-thumbnail"><div class="coupon"><label class="coupon_code">备注:</label><input type="text" id="orderText" class="input-text" placeholder="备注"></div></td><td class="product-remove"></td><td class="product-name"></td><td class="product-price"></td><td class="product-quantity"></td><td class="product-subtotal"><div class="order-total"><span class="title">总价:</span><span class="total-price">￥<span id="sum">'+sum+'</span></span></div></td></tr>';
				document.getElementById("orderDetail").innerHTML=html;
			} else {
				var html='<tr><td class="actions"><h4><a href="gridproducts_leftsidebar.jsp">暂时没有商品! </a></h4></td> </tr>'
				document.getElementById("pdtDetail").innerHTML=html;
			}
			 
		}, "json");
	
	
	function address() {
		layer.open({
			type : 2,
			area : [ '700px', '600px' ],
			content : 'addAddress.jsp' //这里content是一个普通的String
		});
	}
	function addOrder(){
		var total=$("#sum").text();//总计
		var orderText=$("#orderText").val();//订单备注
		
		$.post("http://localhost:8080/Greenleaf/order/add",
				{"total" : total
				,"orderText" : orderText
				,"ids" : '${param.ids}'
				},
				function(res) {
				  if (res) {
					  layer.msg('添加成功');
					  var ids='${param.ids}';//确认商品的所有id
					 var address = $('input[name="checkd"]:checked').val();
					  window.location.href="addressOk.jsp?adsId="+address+"&ids="+ids+"&total="+total;
				} else {
					 layer.msg('添加失败');
					 return false;
				}
			}, "json");
		
		
	}
	function delAddress(adsId) {
		layer.confirm('你确定要删除吗？', function(index) {
			$.post("http://localhost:8080/Greenleaf/Address/del", {
				"adsId" : adsId
			}, function(res) {
				if (res) {
					layer.msg('删除成功', {
						time : 1000
					}, function() {
						location.reload();
					});
				} else {
					layer.msg('删除失败，请稍后重试！');
				}
			}, "json");
			layer.close(index);
		});
	}
</script>
</html>